<template>
    <div>
        <div ref="Pie" id="pie" class="pie" element-loading-text="获取数据中" element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255, 0.8)"></div>
    </div>
</template>
<script setup lang='ts'>
import * as echarts from 'echarts';

const props = defineProps({
    chartData: {
        type: Array<any>,
        default: false
    },
});
watch(() => props.chartData, async val => {
    if (val) {
        initChart()
    }
}, { deep: true })
const colorList = [
    '#F7C1F1',
    '#9B8543',
    '#FAA34B',
    '#FFF200',
    '#397F31',
    '#9C71D7'
]

let myChart: any = null
const resizeDom = ref()
const resizeEle = ref()

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const initChart = () => {
    const data = props.chartData.map((item, index) => {
        return {
            ...item,
            itemStyle: {
                color: colorList[index],
            }
        }
    })
    let Pie = proxy?.$refs.Pie
    // @ts-ignore
    //  基于准备好的dom，初始化echarts实例
    myChart = echarts.init(Pie);
    // 指定图表的配置项和数据
    let option = {
        tooltip: {
            trigger: "item",
            formatter: "{b} :  {d}%",
        },
        toolbox: {
            show: false,
        },
        legend: {
            show: true,
            orient: 'vertical',
            align: 'auto',
            y:'center',
            x:'right',
            itemGap: 7,
            textStyle: {
                color: '#000',
                fontSize: 10,
                rich: {
                    a: {
                        width: 20,
                        align: "left",
                    },
                    b: {
                        width: 35,
                        align: "right",
                    }
                }
            },
            data: data.map(v => v.name),
            formatter: function (name: string) {
                let ratio: any = 0;
                let sum = data.map(v => v.value).reduce(function (prev, cur, index, arr) {
                    return prev + cur;
                })
                if (sum) {
                    if (data.length > 0) {
                        data.forEach((item) => {
                            if (name == item.name) {
                                ratio = ((item.value * 100) / sum).toFixed(0);
                            }
                        });
                    }
                } else {
                    ratio = 0
                }
                let arr = [
                    "{a|" + name + "}",
                    "{b|" + ratio + "%}",
                ];
                return arr.join("");
            },
        },
        series: [
            {
                name: '',
                type: 'pie',
                radius: ['45%', '55%'],
                center: ['28%', '50%'],
                avoidLabelOverlap: true,
                itemStyle: {
                    borderRadius: 2,
                    borderWidth: 2,
                },
                label: {
                    show: false
                },
                labelLine: {
                    show: false, //显示引导线
                    length: 5, //连接饼图第1段线条的长度 length length2 不写自适应
                    length2: 5, //链接饼图第2段线条长度
                    smooth: true, //是否光滑连接线
                },
                data: data
            }
        ]
    };

    option && myChart.setOption(option);
}



window.addEventListener("resize", () => {
    myChart.resize()
});

//*** 挂载Echarts
onMounted(() => {
    initChart()
    resizeDom.value = document.getElementById('pie')
    resizeEle.value = new ResizeObserver((entries) => {
        myChart.resize()
    })
    resizeEle.value.observe(resizeDom.value as HTMLElement)
})

onBeforeUnmount(() => {
    window.removeEventListener('resize', () => {
        myChart.resize()
    });
    resizeEle.value.disconnect(resizeDom.value)
})



</script>
<style scoped lang="scss">
.pie {
    width: 100%;
    height: 100%
}
</style>